<template>
	<view>
		<!-- 搜索栏 -->
		<view class="search">
			<!-- #ifdef H5 -->
			<view class="search_back" @click="search_back"><uni-icons type="back" size="20"></uni-icons></view>
			<!-- #endif -->
			<uni-search-bar class="search_input" @confirm="search" :focus="true" :value="searchValue" @input="inputSearch" @clear="clearSearch" radius="10" cancelButton="none" />
			<view class="search_btn" @click="searchBtn">搜索</view>
		</view>
		<!-- 滚动 -->
		<scroll-view class="scroll" scroll-y="true" @scrolltolower="scrolltolower">
			<!-- 热映电影 -->
			<view class="list">
				<view class="list_item" v-for="(item, index) in move_list" :key="index">
					<image class="list_item_img" :src="item.pic" @click="movieInfoBtn(item)"></image>
					<view class="list_item_info" @click="movieInfoBtn(item)">
						<view class="list_item_info_name">{{ item.name }}</view>
<!-- 						<view class="list_item_info_money">
							<text class="list_item_info_money_text">{{ item.money * 1 + 10 }}</text>
							{{ item.money }}
						</view> -->
						<view class="list_item_info_score">
							评分:
							<text style="color: #f9ba37;">{{ item.grade }}</text>
						</view>
						<view class="list_item_info_type">{{ item.filmTypes }}</view>
						<view class="list_item_info_type">{{ item.duration }}分钟</view>
						<view class="list_item_info_actor">{{ item.cast }}</view>
						<view class="list_item_info_date">{{ item.publishDate }}</view>
					</view>
					<view v-if="item.showStatus==1" class="list_item_btn" @click="buyBtn(item)">购票</view>
					<view v-if="item.showStatus==2" class="list_item_btn" >预售</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import Route from '../../utils/route.js';
export default {
	data() {
		return {
			// 搜索框
			searchValue: '',
			// 电影列表
			move_list: []
		};
	},
	async onLoad(e) {
		this.searchValue = e.name;
		await this.getSearchList(e.name);
	},
	methods: {
		// 获取搜索数据
		async getSearchList(e) {
			let res = await Route.search_list({ keyword: e });
			this.move_list = res.list;
		},
		// 搜索
		inputSearch(e) {
			this.searchValue = e;
		},
		// 清空搜索
		clearSearch() {
			this.searchValue = '';
			var pages = getCurrentPages(); //当前页
			if (pages.length > 1 && pages[pages.length - 2].route == 'pages/index/index') {
				pages[pages.length - 2].$vm.clearSearch();
			}
		},
		// 搜索
		searchBtn() {
			if (!this.searchValue) {
				return uni.showToast({
					icon: 'none',
					title: '请输入电影名称'
				});
			}
		},
		// 电影详情
		movieInfoBtn(e) {
			uni.navigateTo({
				url: '../movie_info/movie_info?filmId=' + e.filmId
			});
		},
		// 购票
		buyBtn(e) {
			let data = {
				filmId: e.filmId,
				pic: e.pic,
				name: e.name,
				grade: e.grade,
				filmTypes: e.filmTypes,
				cast: e.cast,
				publishDate: e.publishDate
			};
			
			uni.navigateTo({
				url: '../movie/movie?data=' + JSON.stringify(data)
			});
		},
		// 返回
		search_back() {
			uni.navigateBack();
		},
		// 选择城市
		select_city() {
			uni.navigateTo({
				url: '../address/address'
			});
		},
		// 列表-触底
		scrolltolower() {
			uni.showToast({
				icon: 'none',
				title: '没有更多啦'
			});
		}
	}
};
</script>
<style lang="scss">
.scroll {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
}
// 搜索
.search {
	position: fixed;
	z-index: 9;
	background: #fff;
	width: 100%;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	&_back {
		padding: 10rpx 20rpx;
	}
	&_city {
		display: flex;
		flex-direction: row;
		align-items: center;
		&_icon {
			width: 49rpx;
			height: 49rpx;
		}
		&_text {
			font-size: $uni-font-size-base;
			margin-left: 10rpx;
		}
	}
	&_input {
		width: 500rpx;
	}
	&_btn {
		background: $template-background;
		color: $uni-text-color-inverse;
		width: 100rpx;
		height: 49rpx;
		padding: 6rpx 16rpx;
		line-height: 49rpx;
		text-align: center;
		border-radius: 40rpx;
	}
}
// 电影列表
.list {
	margin-top: 100rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	&_item {
		position: relative;
		width: 690rpx;
		padding: 33rpx 0;
		display: flex;
		flex-direction: row;
		border-top: 1rpx solid $template-line;
		&_img {
			width: 225rpx;
			height: 333rpx;
			border-radius: $uni-border-radius-lg;
		}
		&_info {
			display: flex;
			flex-direction: column;
			height: 333rpx;
			width: 333rpx;
			justify-content: space-between;
			margin-left: 33rpx;
			&_name {
				font-size: $uni-font-size-lg;
				font-weight: 600;
			}
			&_money {
				font-size: $uni-font-size-base;
				color: red;
				&_text {
					text-decoration: line-through;
					color: $uni-text-color-grey;
					margin-right: 8rpx;
				}
			}
			&_score {
				font-size: $uni-font-size-base;
				color: $uni-text-color-grey;
			}
			&_type {
				font-size: $uni-font-size-base;
				color: $uni-text-color-grey;
			}
			&_actor {
				font-size: $uni-font-size-base;
				color: $uni-text-color-grey;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden
			}
			&_date {
				font-size: $uni-font-size-base;
				color: $uni-text-color-grey;
			}
		}
		&_btn {
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 100rpx;
			height: 66rpx;
			text-align: center;
			line-height: 66rpx;
			background: #f9ba37;
			font-size: $uni-font-size-sm;
			border-radius: $uni-border-radius-lg;
		}
	}
}
</style>
